<template>
    <div class="common-layout">
        <el-container>
            <el-header style="background-color: beige;">
                <el-text class="mx-1">变量选择</el-text>
                <el-button type="primary" class="el-bt1" plain>生成</el-button>
                <el-text class="el-text1">生成结果</el-text>
                <el-button type="primary" class="el-bt2" plain>保存</el-button>
                <el-button type="primary" class="el-bt3" plain>复制</el-button>
            </el-header>
            <el-container class="workspace-container">
                <el-main width="400px" class="left-panel" style="background-color: #f2f2f2;">
                    <Suspense>
                    <VarChoose />
                    </Suspense>
                </el-main>
                <el-main class="right-panel" style="background-color: #f2f2f2;">
                    <ResultShow />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import VarChoose from '@/components/VarChoose.vue';
import ResultShow from '@/components/ResultShow.vue';


</script>



<style scoped>
.el-text {
    color: rgb(28, 27, 27);
    font-size: 15px;
    font-weight: bold;
}

.el-text.el-text1 {
    margin-left: 40px
}

.el-button.el-bt1 {
    margin-left: 300px;
}

.el-button.el-bt2 {
    margin-left: 200px;
}

.left-panel {
    margin: 0;
    padding: 0;
}
</style>